<template>
  <div
    v-loading.fullscreen="loading"
    class="page-squareness"
    @click="
      dialogVisiable = false;
      rankDialog = false;
      zoufangDialog = false;
      zxtjwtDialog =false;
      zxbjwtDialog = false;
      zxDealwtDialog = false;
      cswbjDialog =false;
      workOrderDialog = false;
      timeRangOrderDialog = false;
    "
  >
    <div class="data">
      <div class="data-title">
        <div class="title-left fl"></div>
        <div class="title-center fl">广西实体经济调研服务数据</div>
        <div class="title-right fr"></div>
      </div>
      <div class="data-content">
        <div class="con-left fl">
          <div class="left-top">
            <div
              class="info"
              @click.stop="
                !dialogVisiable;
                rankDialog = false;
              "
            >
              <div class="info-title">八大服务重点问题统计</div>
              <img src="../assets/bj-1.png" alt="" class="bj-1"/>
              <img src="../assets/bj-2.png" alt="" class="bj-2"/>
              <img src="../assets/bj-3.png" alt="" class="bj-3"/>
              <img src="../assets/bj-4.png" alt="" class="bj-4"/>
              <div class="navboxall" ref="echart55" id="echart55"></div>
            </div>

            <div
              class="dialog"
              @click.stop
              ref="dialog"
              v-if="dialogVisiable"
              :style="{ left: xAxis + 'vw', top: yAxis + 'px' }"
            >
              <div class="fix-top">
                <fixtop ref="fixtop" :year="dataYear" :eightGreatnum="eightGreatnum"></fixtop>
              </div>
            </div>

            <div class="top-bottom">
              <div class="tihead" style="margin-bottom: 10px">
                <div class="title">事项分类统计</div>
                <!-- <div class="title">办结率排名</div> -->

                <div
                  class="tiright"
                  @click.stop="!rankDialog"
                  @click="Fundaiig"
                >
                  详情>>
                </div>
              </div>
              <img src="../assets/bj-1.png" alt="" class="bj-1"/>
              <img src="../assets/bj-2.png" alt="" class="bj-2"/>
              <img src="../assets/bj-3.png" alt="" class="bj-3"/>
              <img src="../assets/bj-4.png" alt="" class="bj-4"/>
              <table
                class="table1"
                width="100%"
                border="0"
                cellspacing="0"
                cellpadding="0"
              >
                <!-- <tbody> -->

                <colgroup>
                  <col width="35%"/>
                  <col width="15%"/>
                  <col width="15%"/>
                  <col width="17%"/>
                  <col width="18%"/>
                </colgroup>

                <thead style="color: white; margin-top: 2px;">
                <th style="text-align: center;width:35%;font-size:20px;color: white;">事项分类</th>
                <!-- <th style="text-align: center;">城市</th> -->

                <th style=" font-size:20px;color: white;">总数</th>
                <th style=" font-size:20px;color: white;">占比</th>
                <th style=" font-size:20px;color: white;">办结数</th>
                <th style="font-size:20px;color: white;">办成数</th>
                </thead>
              </table>

              <div class="wrap" style="height: 100%;">
                <vue-seamless-scroll
                  :data="rateScrollList"
                  :class-option="{...optionSetting,autoPlay:false}"
                  class="seamlessWarp"
                >
                  <!-- <div class="seamlessWarp"> -->
                  <ul>
                    <li
                      v-for="(item, i) in rateScrollList"
                      :key="i"
                      :class="'liStyle'"
                      style="cursor: pointer"
                      @click="handleClickRankItem(item)"
                      @click.stop="!rankDialog"
                    >
                      <!--                    <span v-if="i + 1 == 1" class="title1 text_align"-->
                      <!--                    ><div class="fTitle" style="background-color: #ed405d">-->
                      <!--                        {{ i + 1 }}-->
                      <!--                      </div></span-->
                      <!--                    >-->
                      <!--                      <span v-else-if="i + 1 == 2" class="title1 text_align"-->
                      <!--                      ><div class="fTitle" style="background-color: #f78c44">-->
                      <!--                        {{ i + 1 }}-->
                      <!--                      </div></span-->
                      <!--                      >-->
                      <!--                      <span v-else-if="i + 1 == 3" class="title1 text_align"-->
                      <!--                      ><div class="fTitle" style="background-color: #49bcf7">-->
                      <!--                        {{ i + 1 }}-->
                      <!--                      </div></span-->
                      <!--                      >-->
                      <!--                      <span v-else class="title1 text_align"-->
                      <!--                      ><div class="fTitle">{{ i + 1 }}</div></span-->
                      <!--                      >-->

                      <span class="title1 text_align" style="text-decoration: underline">{{ item.tagName == '融资服务'?item.tagName:item.tagName.replace('服务', '') }}</span>
                      <span class="title1 text_align">{{ item.allCount }}</span>
                      <span class="title1 text_align">{{ item.rate }}%</span>
                      <!-- <span class="title1 text_align">{{ item.countAll }}</span> -->

                      <span class="title1 text_align">{{
                          item.countStatus_5
                        }}</span>
                      <span class="title1 text_align"
                      >{{ item.countCom }}</span
                      >
                    </li>
                  </ul>
                  <!-- </div> -->
                </vue-seamless-scroll>
              </div>
            </div>
            <div
              class="rankDialog"
              @click.stop
              ref="rankDialog"
              v-if="rankDialog"
              :style="{ left: xAxis + 'vw', top: '-90%' }"
            >
              <rank :year="dataYear" @openOrder="handleOpenOrder" :tagId="tagIdShow"></rank>
            </div>
            <!--123456  -->
          </div>

          <div class="left-bottom" style="display:none;">
            <div class="tihead">
              <div class="title">走访排名</div>

              <div class="tiright" @click="Funzoufang" @click.stop="!zoufangDialog">详情>></div>
            </div>
            <img src="../assets/bj-1.png" alt="" class="bj-1"/>
            <img src="../assets/bj-2.png" alt="" class="bj-2"/>
            <img src="../assets/bj-3.png" alt="" class="bj-3"/>
            <img src="../assets/bj-4.png" alt="" class="bj-4"/>
            <div id="echarts_5" class="charts" ref="echarts_5"></div>
          </div>
          <div
            class="zoufangDialog"
            @click.stop
            ref="zoufangDialog"
            v-if="zoufangDialog"
            :style="{ left: xAxis + 'vw', top: '-87.5vh' }"
          >
            <zfxq></zfxq>
          </div>
        </div>
        <div class="con-center fl">
          <div class="map-num pulll_left" style="cursor: pointer">
            <div>
              <!--              <p style="font-size:36px">累计走访次数总数</p>-->
              <p style="font-size:36px" @click="yearSelectorShow = !yearSelectorShow">事项总数</p>
              <Transition>
                <div class="yearSelectorContainer" v-show="yearSelectorShow">
                  <ul class="yearSelector">
                    <li @click="selectYear">全部</li>
                    <li @click="selectYear">2025</li>
                    <li @click="selectYear">2024</li>
                    <li @click="selectYear">2023</li>
                  </ul>
                </div>
              </Transition>
              <div class="num">
                <span
                  class="span"
                  v-for="(item, index) in this.nList"
                  :key="index"
                >{{ item }}</span
                >
              </div>
            </div>
            <div class="pulll_right zhibiao">
              <div class="zb3">
                <span>已答复</span>
                <div id="zb0" ref="zb0"></div>
              </div>
              <div class="zb1">
                <span>已办结</span>
                <div id="zb1" ref="zb1"></div>
              </div>
              <div class="zb2">
                <span>已办成</span>
                <div id="zb2" ref="zb2"></div>
              </div>
              <!--              <div class="zb3">-->
              <!--                <span>本周走访数</span>-->
              <!--                <div id="zb3" ref="zb3"></div>-->
              <!--              </div>-->
            </div>
            <div class="cander" @click.stop>
              <fixleft @selectChange="handleCanderSelect" ></fixleft>
            </div>
          </div>

          <div class="cen-top" id="map" ref="map"></div>
          <div class="cen-bottom">
            <div class="title" style="font-size: 22px;">事项数量走势</div>
            <!-- <div class="title" style="font-size: 22px;">企业分类走访趋势图</div> -->
            <img src="../assets/bj-1.png" alt="" class="bj-1"/>
            <img src="../assets/bj-2.png" alt="" class="bj-2"/>
            <img src="../assets/bj-3.png" alt="" class="bj-3"/>
            <img src="../assets/bj-4.png" alt="" class="bj-4"/>
            <!-- <div id="echarts_3" class="charts"></div> -->
            <div class="charts" id="echart33" ref="echart33"></div>
          </div>
        </div>

        <div class="con-right fr">
          <div v-if="zxtjwtDialog" class="zxtjwtDialog" ref="zxtjwtDialog" @click.stop
               :style="{ left:'-74vw', top:'0vh' }">
            <zxtjwt></zxtjwt>
          </div>
          <div v-if="timeRangOrderDialog" class="zxtjwtDialog" ref="timeRangOrderDialog" @click.stop
               :style="{ left:'-74vw', top:'0vh' }">
            <timeRangOrder :start-time="timeRangOrderParam.startTime" :end-time="timeRangOrderParam.endTime"></timeRangOrder>
          </div>
          <div v-if="workOrderDialog" class="workOrderDialog" ref="workOrderDialog" @click.stop
               :style="{ left:'-74vw', top:'0vh' }">
            <div class="title">
              <el-button type="plain" size="small" icon="el-icon-top" @click="workOrderDialog = false">返回</el-button>
            </div>
            <workOrderShowSq :order-id="orderShowId"></workOrderShowSq>
          </div>
          <div v-if="zxbjwtDialog" class="zxbjwtDialog" ref="zxbjwtDialog" @click.stop
               :style="{ left:'-74vw', top:'0vh' }">
            <zxbjwt></zxbjwt>
          </div>
          <div v-if="cswbjDialog" class="cswbjDialog" ref="cswbjDialog" @click.stop
               :style="{ left:'-74vw', top:'0vh' }">
            <cswbj></cswbj>
          </div>
          <div v-if="zxDealwtDialog" class="zxtjwtDialog" ref="zxDealwtDialog" @click.stop
               :style="{ left:'-74vw', top:'0vh' }">
            <zxDealwt></zxDealwt>
          </div>

          <div class="right-top">
            <div class="title" style="margin-bottom: 10px;">
              <div style="font-size:22px;">最新提交问题</div>
              <div class="tilx" @click="FunzxtjwtDialog" @click.stop="!zxtjwtDialog">详情>></div>
            </div>
            <img src="../assets/bj-1.png" alt class="bj-1"/>
            <img src="../assets/bj-2.png" alt class="bj-2"/>
            <img src="../assets/bj-3.png" alt class="bj-3"/>
            <img src="../assets/bj-4.png" alt class="bj-4"/>
            <div class="wraptit">
              <span>状态</span>
              <span>标题</span>
              <span>企业名称</span>
            </div>
            <div class="wrap">
              <vue-seamless-scroll
                :data="submitScrollList"
                class="seamless-warp"
                :class-option="optionSetting"
              >
                <li v-for="(item, i) in submitScrollList" :key="i" :id="i">
                  <p @click="handleClickWorkOrder(item)" @click.stop="!workOrderDialog"  class="workOrderHandle">
                    <span
                      :class="[item.status=='已办结'?'qq':'',item.status=='处理中'?'ww':'',item.status=='已提交'?'ww':'',item.status=='待提交'?'ww':'',item.status=='已退回'?'ww':'']">{{
                        item.status
                      }}</span>
                    <span>{{ item.title }}</span>
                    <span>{{ item.corpName }}</span>
                  </p>
                </li>
              </vue-seamless-scroll>
            </div>
          </div>

          <div class="right-center">
            <div class="title" style="margin-bottom: 10px;">

              <div style="font-size:22px">最新处理中问题</div>
              <div class="tilx" @click="FunzxDealwtDialog" @click.stop="!zxDealwtDialog">详情>></div>

            </div>
            <img src="../assets/bj-1.png" alt="" class="bj-1"/>
            <img src="../assets/bj-2.png" alt="" class="bj-2"/>
            <img src="../assets/bj-3.png" alt="" class="bj-3"/>
            <img src="../assets/bj-4.png" alt="" class="bj-4"/>

            <div class="wraptit">
              <span>状态</span><span>标题</span><span>企业名称</span>
            </div>
            <div class="wrap">
              <vue-seamless-scroll
                :data="endScrollList"
                class="seamless-warp"
                :class-option="optionSetting"
              >
                <li v-for="(item, i) in dealScrollList" :key="i" :id="i">
                  <p  @click="handleClickWorkOrder(item)"  @click.stop="!workOrderDialog"  class="workOrderHandle">
                    <span class="qq">{{ item.status }}</span>
                    <span>{{ item.title }}</span>
                    <span>{{ item.corpName }}</span>
                  </p>
                </li>
              </vue-seamless-scroll>
            </div>
          </div>

          <div class="right-bottom">
            <div class="title" style="margin-bottom: 10px;">

              <div style="font-size:22px">最新办结问题</div>
              <div class="tilx" @click="FunzxbjwtDialog" @click.stop="!zxbjwtDialog">详情>></div>

            </div>
            <img src="../assets/bj-1.png" alt="" class="bj-1"/>
            <img src="../assets/bj-2.png" alt="" class="bj-2"/>
            <img src="../assets/bj-3.png" alt="" class="bj-3"/>
            <img src="../assets/bj-4.png" alt="" class="bj-4"/>

            <div class="wraptit">
              <span>状态</span><span>标题</span><span>企业名称</span>
            </div>
            <div class="wrap">
              <vue-seamless-scroll
                :data="endScrollList"
                class="seamless-warp"
                :class-option="optionSetting"
              >
                <li v-for="(item, i) in endScrollList" :key="i" :id="i">
                  <p @click="handleClickWorkOrder(item)"  @click.stop="!workOrderDialog" class="workOrderHandle">
                    <span class="qq">{{ item.status }}</span>
                    <span>{{ item.title }}</span>
                    <span>{{ item.corpName }}</span>
                  </p>
                </li>
              </vue-seamless-scroll>
            </div>
          </div>

          <!-- timeoutScrollList -->

          <!--          <div class="right-bottom">-->
          <!--            <div class="title" style="margin-bottom: 10px;">-->
          <!--               <div style="font-size:22px">处理中</div>-->
          <!--               <div class="tilx"  @click="FuncswbjDialog" @click.stop="!cswbjDialog">详情>></div>-->

          <!--            </div>-->
          <!--            <img src="../assets/bj-1.png" alt="" class="bj-1" />-->
          <!--            <img src="../assets/bj-2.png" alt="" class="bj-2" />-->
          <!--            <img src="../assets/bj-3.png" alt="" class="bj-3" />-->
          <!--            <img src="../assets/bj-4.png" alt="" class="bj-4" />-->
          <!--            <div class="wraptit">-->
          <!--              <span class="abc">超时天数</span><span>标题</span><span>企业名称</span>-->
          <!--            </div>-->
          <!--            <div class="wrap">-->
          <!--              <vue-seamless-scroll-->
          <!--                :data="timeoutScrollList"-->
          <!--                class="seamless-warp"-->
          <!--                :class-option="optionSetting"-->
          <!--              >-->
          <!--                <li v-for="(item, i) in timeoutScrollList" :key="i" :id="i">-->
          <!--                  <p>-->
          <!--                    <span class="ee">{{ item.cday }}</span>-->
          <!--                    <span>{{ item.title }}</span>-->
          <!--                    <span>{{ item.corpName }}</span>-->
          <!--                  </p>-->
          <!--                </li>-->
          <!--              </vue-seamless-scroll>-->
          <!--            </div>-->
          <!--          </div>-->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import env from "../env";
import fixtop from "../components/fixtop";
import fixleft from "../components/fixleft";
import rank from "../components/rank";
import zfxq from "../components/zfxq";
import zxtjwt from "../components/zxtjwt";
import zxDealwt from "../components/zxdealwt";
import zxbjwt from "../components/zxbjwt";
import timeRangOrder from "../components/timeRangOrder";
import cswbj from "../components/cswbj";
import workOrderShowSq from '../components/workOrderShowSq'
import mixin from "../mixin";

import vueSeamlessScroll from "vue-seamless-scroll";

export default {
  name: "page-squareness",
  title: "驾驶舱",
  ip: env.ip,
  nodes: [],
  childs: [],
  mixins: [mixin],

  data() {
    return {
      nList: [],
      a: "",
      xAxis: 23.8,
      yAxis: 0,
      y: -62.5,
      dialogVisiable: false,
      rankDialog: false,
      zxbjwtDialog: false,
      zxDealwtDialog: false,
      cswbjDialog: false,
      zxtjwtDialog: false,
      timeRangOrderDialog: false,
      workOrderDialog: false,
      zoufangDialog: false,
      submitScrollList: [],
      dealScrollList: [],
      endScrollList: [],
      timeoutScrollList: [],
      rateScrollList: [],// 调研服务小组办结率排名
      rateTypeScrollList: [],// 事项分类办结率排名
      eightGreatnum: [],
      timer: "",
      yearSelectorShow: false,
      dataYear: null,
      monthDataAll: {
        confirm: false,
        loading: false,
        initPreDatas:[],// 开始的时候加载两年的数据，但是只展示了最近一年的数据，其他的放到这里，如果第一次拖动到最左边，那么一起加入进去
        datas: [],
        names: [],
        years: []
      },
      monthDataZoomOption: {
        start: 5,
        end: 100
      },
      orderShowId:null,
      tagIdShow:null,
      timeRangOrderParam:{
        startTime:null,
        endTime:null
      }
    };
  },
  components: {
    vueSeamlessScroll,
    fixtop,
    fixleft,
    rank,
    zfxq,
    cswbj,
    zxDealwt,
    zxbjwt,
    zxtjwt,
    workOrderShowSq,
    timeRangOrder,
  },
  computed: {
    optionSetting() {
      return {
        step: 0.1, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        autoPlay: true, // 是否自动滚动
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
        openTouch: true,
        zhou: 0,
        yue: 0,
        nian: 0,
      };
    },
  },
  methods: {
    init() {
      if (this.loading) return;
    },
    Funzoufang() {
      this.zoufangDialog = true;
      this.rankDialog = false;
    },
    FuncswbjDialog() {
      this.cswbjDialog = true;
      this.zxbjwtDialog = false;
      this.zxtjwtDialog = false;
      this.zxDealwtDialog = false;
    },
    FunzxtjwtDialog() {
      this.zxbjwtDialog = false;
      this.zxtjwtDialog = true;
      this.cswbjDialog = false;
      this.zxDealwtDialog = false;
    },
    FunzxbjwtDialog() {
      this.zxtjwtDialog = false;
      this.cswbjDialog = false;

      this.zxbjwtDialog = true;
      this.zxDealwtDialog = false;
    },
    FunzxDealwtDialog() {
      this.zxtjwtDialog = false;
      this.cswbjDialog = false;

      this.zxbjwtDialog = false;
      this.zxDealwtDialog = true;
    },
    Fundaiig() {
      this.tagIdShow = null
      this.rankDialog = true;
      this.dialogVisiable = false;
      this.zoufangDialog = false
    },
    echarts_55() {
      this.$nextTick(() => {
        var myChart = this.$echarts.getInstanceByDom(document.querySelector("#echart55")) || this.$echarts.init(document.querySelector("#echart55"));
        var minCount;
        var maxCount;
        var dataName = [];
        var dataCount = [];
        var dataCount2 = [];
        var dataCount3 = [];

        this.plugins.user.getEightData(this.dataYear).then((res) => {
          res.data.sort(function (a, b) {
            return a.count - b.count;
          });
          //   var tempLength=res.data.length
          minCount = res.data[0].count;
          maxCount = res.data[res.data.length - 1].count;

          res.data.forEach((item) => {
            dataName.push(item.name);
            dataCount.push(item.count);
          });
          dataCount2 = dataCount.map((x,index)=>{
            return {
              name:dataName[index],
              value:-5000
            }
          })
          dataCount3 = dataCount.map((x,index)=>{
            return {
              name:dataName[index],
              value:-1
            }
          })
          var lightBlue = {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(41, 121, 255, 1)",
              },
              {
                offset: 1,
                color: "rgba(0, 192, 255, 1)",
              },
            ],
            globalCoord: false,
          };

          var option = {
            tooltip: {
              show: false,
            },
            grid: {
              top: "0%",
              left: "160",
              right: "10%",
              bottom: "0%",
            },
            xAxis: {
              min: 0,
              max: maxCount,
              splitLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              axisLabel: {
                show: false,
              },
            },
            yAxis: {
              // data: ['招商引资服务', '政策落地兑现', '复工复产保障', '管理信息咨询服务', '企业创新升级服务', '市场开拓', '用能用工保障', '融资服务'],  dataName
              data: dataName,
              //offset: 15,
              show:false,
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              axisLabel: {
                color: "white",
                width: "600",
                fontSize: 22,
              },
            },
            series: [
              {
                type: "bar",
                label: {
                  show: true,
                  zlevel: 10000,
                  position: "right",
                  // padding: 10,
                  color: "#49bcf7",
                  fontSize: 22,
                  formatter: "{c}",
                },
                itemStyle: {
                  color: "#49bcf7",
                },
                barWidth: "22",
                // data: [49, 80, 67, 99, 12, 19, 39, 84,], dataCount
                data: dataCount,
                z: 10,
              },

              {
                type: "bar",
                label: {
                  show: true,
                  zlevel: 10000,
                  position: "left",
                  // padding: 10,
                  color: "#fff",
                  fontSize: 22,
                  formatter: (e)=>{
                    console.log('e-data-name',e)
                    return e.name
                  },
                },
                barGap: "-100%",
                itemStyle: {
                  color: "#fff",
                  opacity: 1,
                },
                barWidth: "22",
                data: dataCount3,
                z: 5,
              },
              {
                type: "bar",
                label: {
                  show: false,
                  zlevel: 10000,
                  position: "insideRight",
                  // padding: 10,
                  color: "#fff",
                  fontSize: 22,
                  formatter: (e)=>{
                    console.log('e-data-name',e)
                    return e.name
                  },
                },
                barGap: "-100%",
                itemStyle: {
                  color: "#fff",
                  opacity: 0,
                },
                barWidth: "22",
                data: dataCount2,
                z: 5,
              },
            ],
          };
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option, true);
          myChart.on("click", (params) => {
            console.log('click',this.plugins.user.geteightGreatnum)
            console.log('click',this.dataYear)
            this.plugins.user.geteightGreatnum(params.name,this.dataYear).then((res) => {
              this.aa = params.name;
              this.eightGreatnum = res.data;
              this.$nextTick(() => {
                this.$refs.fixtop.initData();
              });
            });
            this.dialogVisiable = true;
            // this.xAxis =this.$refs.echart55.offsetWidth+25;
          });
          window.addEventListener("resize", function () {
            myChart.resize();
          });

        });


      });
    },

    echarts_5() {
      // 基于准备好的dom，初始化echarts实例
      this.$nextTick(() => {
        let myChart = this.$echarts.getInstanceByDom(document.querySelector("#echarts_5")) || this.$echarts.init(document.querySelector("#echarts_5"));

        var personalName = [];
        var personalCount = [];

        this.plugins.user.getVisitsList().then((res) => {
          personalCount = [];
          res.data.sort(function (a, b) {
            return b.count - a.count;
          });
          res.data.forEach((item) => {
            personalName.push(item.fwxz);
            personalCount.push(item.count);
          });


          // personalCount=[17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1]

          var xData = (function () {
            // var data = ['NO.1', 'NO.2', 'NO.3', 'NO.4', 'NO.5'];   personalCount
            var data = personalName;
            return data;
          })();
          // console.log(xData.slice(0,8));
          var xxData = xData.slice(0, 8)
          // var data = [28, 22, 20, 16, 12]
          var data = personalCount;
          var ydata = data.slice(0, 8)

          var option = {
            // backgroundColor: "#141f56",

            // 底部Zoom
            // dataZoom: [
            //   {
            //     show: true,
            //     realtime: true,
            //     height: 12, //这里可以设置dataZoom的尺寸
            //     bottom: 4,	//滚动体距离底部的距离
            //     start: 0,  //初始化时，滑动条宽度开始标度
            //     end: 28, //初始化时，滑动条宽度结束标度
            //   },
            //   {
            //     type: "inside", //内置滑动，随鼠标滚轮展示
            //     realtime: true,
            //     start: 0,
            //     end: 28,
            //   },
            // ],

            tooltip: {
              show: "true",
              trigger: "item",
              backgroundColor: "rgba(0,0,0,0.4)", // 背景
              padding: [8, 10], //内边距
              // extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
              formatter: function (params) {
                if (params.seriesName != "") {
                  // return params.name + ' ：  ' + params.value + ' 辆';
                  return params.name + " ：  " + params.value;
                }
              },
            },
            grid: {
              borderWidth: 0,
              top: 15,
              bottom: 60,
              left: 45,
              right: 0,
              textStyle: {
                color: "#fff",
              },
            },
            xAxis: [
              {
                type: "category",

                axisTick: {
                  show: false,
                },
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: "#363e83",
                  },
                },
                axisLabel: {
                  inside: false,
                  textStyle: {
                    color: "white",
                    fontWeight: "normal",
                    fontSize: "16",
                  },
                  rotate: "45",
                  // formatter:function(val){
                  //     return val.split("").join("\n")
                  // },
                },
                data: xxData,
              },
              {
                type: "category",
                axisLine: {
                  show: false,
                },
                axisTick: {
                  show: false,
                },
                axisLabel: {
                  show: false,
                },
                splitArea: {
                  show: false,
                },
                splitLine: {
                  show: false,
                },
                data: (xData.slice(0, 8)),
              },
            ],
            yAxis: {
              type: "value",
              splitNumber: 4,
              axisTick: {
                show: false,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#32346c",
                },
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "#32346c ",
                },
              },
              axisLabel: {
                textStyle: {
                  color: "white",
                  fontWeight: "normal",
                  fontSize: "20",
                },
                formatter: "{value}",
              },
            },
            series: [
              {
                // name: '生师比(%)',
                type: "bar",
                itemStyle: {
                  normal: {
                    show: true,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: "#00c0e9",
                      },
                      {
                        offset: 1,
                        color: "#3b73cf",
                      },
                    ]),
                    barBorderRadius: 50,
                    borderWidth: 0,
                  },
                  emphasis: {
                    shadowBlur: 15,
                    shadowColor: "rgba(105,123, 214, 0.7)",
                  },
                },
                zlevel: 2,
                barWidth: "35%",
                data: ydata,
              },
              {
                name: "",
                type: "bar",
                xAxisIndex: 1,
                zlevel: 1,
                itemStyle: {
                  normal: {
                    color: "#121847",
                    borderWidth: 0,
                    shadowBlur: {
                      shadowColor: "rgba(255,255,255,0.31)",
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowOffsetY: 2,
                    },
                  },
                },
                barWidth: "15%",
                // data: [30, 30, 30, 30, 30]
              },
            ],
          };
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
          window.addEventListener("resize", function () {
            myChart.resize();
          });
        });


      });
    },

    map() {
      // 基于准备好的dom，初始化echarts实例
      this.$nextTick(() => {
        var banjieList = []
        let startTime = undefined
        let endTime = new Date().formatDate("yyyy-MM-dd hh:mm:ss")
        if (this.dataYear) {
          startTime = this.dataYear + '-01-01 00:00:00'
          endTime = this.dataYear + '-12-31 23:59:59'
        }
        this.plugins.user.getRateScrollList({
          startTime: startTime,
          endTime: endTime
        }).then(res => {
          let countAll = res.data.reduce((a, b) => a?.countAll || a + b.countAll)
          let countMin = res.data.map(x => x.countAll).sort().find(x => x)
          res.data.map((item) => {
            banjieList.push(
              Object.assign(item, {
                bRate: ((item.countStatus_5 / item.countAll) * 100).toFixed(0),
              })
            );
          });


          let myChart = this.$echarts.getInstanceByDom(document.querySelector("#map")) || this.$echarts.init(document.querySelector("#map"));
          var mapList = [];
          this.plugins.user.getMapList().then((res) => {
            mapList = [];

            // 增加比例
            res.data.map((item) => {
              mapList.push(
                Object.assign(item, {
                  mRate: ((item.yizoufang / item.zongshu) * 100).toFixed(0),
                })
              );
            });

            mapList.forEach(i => {
              for (let a = 0; a < banjieList.length; a++) {
                const element = banjieList[a];

                if (i.name == element.name) {
                  i.sort = element.sort
                  i.bRate = element.bRate,
                    i.countAll = element.countAll,
                    i.countStatus_5 = element.countStatus_5,
                    i.complete = element.complete,
                    i.level = element.level,
                    i.parentId = element.parentId
                  break;
                }


              }


            });
            // console.log(mapList);

            var allCity = [
              {name: "南宁市"},
              {name: "崇左市"},
              {name: "柳州市"},
              {name: "来宾市"},
              {name: "桂林市"},
              {name: "梧州市"},
              {name: "贺州市"},
              {name: "玉林市"},
              {name: "贵港市"},
              {name: "百色市"},
              {name: "钦州市"},
              {name: "河池市"},
              {name: "北海市"},
              {name: "防城港市"},
            ];
            let diffCity = allCity.filter((v) => {
              return mapList.every((e) => e.name != v.name);
            });
            if (diffCity.length) {
              diffCity.forEach((item) => {
                item.mRate = 100;
                item.yizoufang = 0;
                item.zongshu = 0;
              });
            }
            mapList = [...mapList, ...diffCity];

            let cityColor =[
              "#4fe891",
              "#90def6",
              "#e3d060",
              "#f5aa75",
              "#f35a5a",
              "#ee0c0c"
            ]
            let cityColorStrArr = `南宁市、百色市、崇左市
                            柳州市、河池市、来宾市
                            桂林市、贺州市
                            梧州市、贵港市
                            北海市、玉林市
                            防城港市、钦州市`;
            cityColorStrArr = cityColorStrArr.split('\n').map(x=>x.trim().split('、'))
            // 处理颜色
            mapList.forEach((item) => {
              if (+item.mRate <= 20) {
                item.mColor = "#f35a5a";
              } else if (+item.mRate <= 40) {
                item.mColor = "#f5aa75";
              } else if (+item.mRate <= 60) {
                item.mColor = "#EEC900"; //yellow
              } else if (+item.mRate <= 80) {
                item.mColor = "#90def6";
              } else {
                item.mColor = "#4fe891";
              }
              // 重新用城市分组定义颜色
              cityColorStrArr.forEach((citys,index)=>{
                if(citys.includes(item.name)){
                  item.mColor = cityColor[index]
                }
              })
            });


            var mapColor = [];
            mapList.forEach((item) => {
              mapColor.push({
                name: item.name, //与china.js对应的省份名称
                itemStyle: {
                  areaColor: item.mColor, //省份背景色
                },
              });
            });
            var nameColor = " rgb(55, 75, 113)";
            var name_fontFamily = "宋体";
            var name_fontSize = 35;
            var mapName = "china";
            var data = [];
            var geoCoordMap = {};
            var toolTipData = [];

            /*获取地图数据*/
            myChart.showLoading();
            var mapFeatures = echarts.getMap(mapName).geoJson.features;
            myChart.hideLoading();
            mapFeatures.forEach(function (v) {
              // 地区名称
              var name = v.properties.name;
              // 地区经纬度
              geoCoordMap[name] = v.properties.cp;
              data.push({
                name: name,
                // value: Math.round(Math.random() * 100 + 10)
              });

              let valueMap;
              let notVisit;
              let totalVisit;
              let banjiezong;
              let banjienum;
              let banchengNum;
              let banjielv;
              for (let index = 0; index < mapList.length; index++) {
                let item = mapList[index];
                // console.log(item.bRate);
                let baifenbi
                if (item.bRate == "NaN") {
                  baifenbi = "0"
                } else {
                  baifenbi = item.bRate
                }

                if (name == item.name) {
                  totalVisit = item.zongshu;
                  valueMap = item.yizoufang;
                  banjienum = item.countStatus_5;
                  banchengNum = item.complete;
                  // banjielv = baifenbi ? baifenbi : "0";
                  banjielv = Math.round(item.countStatus_5/item.countAll * 100);
                  banjiezong = item.countAll;
                  notVisit = item.zongshu - item.yizoufang;
                  break;
                }
              }

              toolTipData.push({
                name: name,
                value: [
                  // {
                  //   name: "总规上企业数量",
                  //   value: totalVisit,
                  // },
                  // {
                  //   name: "已走访规上企业数量",
                  //   value: valueMap,
                  // },
                  // {
                  //   name: "未走访规上企业数量",
                  //   value: notVisit,
                  // },
                  {
                    name: "事项总数",
                    value: banjiezong,
                  },
                  {
                    name: "办结数",
                    value: banjienum,
                  },
                  {
                    name: "办结率",
                    value: banjielv + "%",

                  },
                  {
                    name: "办成数",
                    value: banchengNum,

                  }
                  // {
                  //     name: "自治区级政策",
                  //     value: Math.round(Math.random() * 100 + 10) + '辆'
                  // }
                ],
              });
            });

            var max = 480,
              min = 9; // todo
            var maxSize4Pin = 50,
              minSize4Pin = 20;

            var convertData = function (data) {
              var res = [];
              for (var i = 0; i < data.length; i++) {
                var geoCoord = geoCoordMap[data[i].name];
                if (geoCoord) {
                  res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value),
                  });
                }
              }
              return res;
            };
            var option = {
              tooltip: {
                trigger: "item",
                formatter: function (params) {
                  console.log('params:', params)
                  if (typeof params.value[2] == "undefined") {
                    var toolTiphtml = "";
                    for (var i = 0; i < toolTipData.length; i++) {
                      if (params.name == toolTipData[i].name) {
                        toolTiphtml += `<span style="font-size:20px;">${toolTipData[i].name}</span>` + ":<br>";
                        for (var j = 0; j < toolTipData[i].value.length; j++) {
                          toolTiphtml +=
                            `<span style="font-size:20px;">${toolTipData[i].value[j].name}</span>` +
                            ":" +
                            `<span style="font-size:20px;">${toolTipData[i].value[j].value}</span>` +
                            "<br>";
                        }
                      }
                    }

                    return toolTiphtml;
                  } else {
                    var toolTiphtml = "";
                    for (var i = 0; i < toolTipData.length; i++) {
                      if (params.name == toolTipData[i].name) {
                        toolTiphtml += `<span style="font-size:20px;">${toolTipData[i].name}</span>` + ":<br>";
                        for (var j = 0; j < toolTipData[i].value.length; j++) {
                          toolTiphtml +=
                            `<span style="font-size:20px;">${toolTipData[i].value[j].name}</span>` +
                            ":" +
                            <span style="font-size:20px;">${toolTipData[i].value[j].value}</span>+
                            "<br>";
                        }
                      }
                    }
                    return toolTiphtml;
                  }
                },
              },

              title: {
                text: "片区划分",
                x: "left",
                y: "68%",
                show: true,
                textStyle: {
                  fontSize: 30,
                  color: "#fff",
                  fontWeight: "normal",
                },
              },
              dataRange: {
                x: "left",
                y: "74%",
                show: true,
                splitList: [
                  {start: 90, end: 100, label: "第一片区（南宁市、百色市、崇左市）"},
                  {start: 70, end: 90, label: "第二片区（柳州市、河池市、来宾市）"},
                  {start: 60, end: 80, label: "第三片区（桂林市、贺州市）"},
                  {start: 50, end: 70, label: "第四片区（梧州市、贵港市）"},
                  {start: 50, end: 60, label: '第五片区（北海市、玉林市）'},
                  {start: 0, end: 50, label: '第六片区（防城港市、钦州市）'},
                ],
                color: cityColor,
                // color: ["#4fe891", "#90def6", "#e3d060", "#f5aa75", "#ef8282e9"],

                textStyle: {
                  fontSize: 22,

                  color: "#fff",
                },
              },
              legend: {
                orient: "vertical",
                y: "bottom",
                x: "right",
                data: ["credit_pm2.5"],
                textStyle: {
                  color: "#fff",
                },
              },
              visualMap: {
                show: false,
                min: 0,
                max: 600,
                left: "left",
                top: "bottom",
                text: ["高", "低"], // 文本，默认为数值文本
                calculable: true,
                seriesIndex: [1],
                inRange: {
                  // color: ['#3B5077', '#031525'] // 蓝黑
                  // color: ['#ffc0cb', '#800080'] // 红紫
                  // color: ['#3C3B3F', '#605C3C'] // 黑绿
                  //  color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
                  // color: ['#23074d', '#cc5333'] // 紫红
                  //   color: ['#00467F', '#A5CC82'] // 蓝绿
                  // color: ['#1488CC', '#2B32B2'] // 浅蓝
                  // color: ['#00467F', '#A5CC82','#ffc0cb'] // 蓝绿红
                  // color: ['#00467F', '#A5CC82'] // 蓝绿
                  // color: ['#00467F', '#A5CC82'] // 蓝绿
                  // color: ['#00467F', '#A5CC82'] // 蓝绿
                  color: ["#22e5e8", "#0035f9", "#22e5e8"], // 蓝绿
                },
              },
              /*工具按钮组*/
              toolbox: {
                show: false,
                orient: "vertical",
                left: "right",
                top: "center",
                feature: {
                  dataView: {
                    readOnly: false,
                  },
                  restore: {},
                  saveAsImage: {},
                },
              },
              geo: {
                zoom: 2.3, //大小
                left: "75%", //位置
                top: "60%",

                show: true,
                map: mapName,
                label: {
                  normal: {
                    show: false,
                    color: "#fff",
                    position:'top'
                    // backgroundColor:'red'
                  },
                  emphasis: {
                    show: false,
                  },
                },
                roam: true,
                regions: [
                  {
                    name: "南海诸岛",
                    itemStyle: {
                      // 隐藏地图
                      normal: {
                        opacity: 0, // 为 0 时不绘制该图形
                      },
                    },
                    label: {
                      show: false, // 隐藏文字
                    },
                  },
                  // {
                  //    name: '南宁市',//与china.js对应的省份名称
                  //    itemStyle: {
                  //    areaColor: 'pink',//省份背景色
                  //    }
                  // }
                  ...mapColor,
                ],
                itemStyle: {
                  normal: {
                    areaColor: "#031525",
                    borderColor: "#097bba",
                  },
                  emphasis: {
                    areaColor: "#2B91B7",
                  },
                },
              },
              series: [
                {
                  name: '城市名称',
                  type: 'scatter', // 使用 scatter 来定位城市名称的位置
                  coordinateSystem: 'geo',
                  data: [
                    {name:'南宁市',value:[108.339929,23.016412]},
                    {name:'百色市',value:[106.530095,24.044843]},
                    {name:'崇左市',value:[107.44766,22.427574]},
                    {name:'柳州市',value:[109.425369,24.523369]},
                    {name:'河池市',value:[108.001878,24.626423]},
                    {name:'来宾市',value:[109.140211,23.755164]},
                    {name:'桂林市',value:[110.188857,25.228292]},
                    {name:'贺州市',value:[111.522661,24.405488]},
                    {name:'梧州市',value:[111.083426,23.409658]},
                    {name:'贵港市',value:[109.804813,23.25675]},
                    {name:'北海市',value:[109.296588,21.7245]},
                    {name:'玉林市',value:[110.209554,22.472467]},
                    {name:'防城港市',value:[108.296235,21.812577]},
                    {name:'钦州市',value:[108.903346,22.104343]},
                  ],
                  symbolSize: function (val) {
                    return val[2] / 10;
                  },
                  label: {
                    normal: {
                      formatter: '{b}',
                      position: 'inside',
                      color:'white',
                      fontSize:20,
                      show: true
                    },
                    emphasis: {
                      show: true
                    }
                  },
                  itemStyle: {
                    normal: {
                      color: 'white' // 城市点颜色
                    }
                  }
                },
                {
                  name: "散点",
                  type: "scatter",
                  geoIndex: 0,
                  coordinateSystem: "geo",
                  data: convertData(data),
                  symbolSize: function (val) {
                    return val[2] / 10;
                  },
                  label: {
                    normal: {
                      formatter: "{b}",
                      position: "right",
                      show: false,
                    },
                    emphasis: {
                      show: false,
                    },
                  },
                  itemStyle: {
                    normal: {
                      color: "rgba(255,255,0,0.8)",
                    },
                  },
                },
                {
                  type: "map",
                  map: mapName,
                  geoIndex: 0,
                  aspectScale: 0.75, //长宽比
                  showLegendSymbol: false, // 存在legend时显示
                  label: {
                    normal: {
                      show: false,
                      color:'red',
                      position:'right'
                    },
                    emphasis: {
                      show: false,
                      textStyle: {
                        color: "#fff",
                      },
                    },
                  },
                  roam: true,
                  itemStyle: {
                    normal: {
                      areaColor: "#031525",
                      borderColor: "#3B5077",
                    },
                    emphasis: {
                      areaColor: "#2B91B7",
                    },
                  },
                  animation: false,
                  data: data,
                  // data: ['南宁市','崇左市','柳州市','来宾市','桂林市','梧州市','贺州市','玉林市','贵港市','百色市','钦州市','河池市','北海市','防城港市']
                },
                {
                  name: "点",
                  type: "scatter",
                  coordinateSystem: "geo",
                  symbol: "pin", //气泡
                  symbolSize: function (val) {
                    var a = (maxSize4Pin - minSize4Pin) / (max - min);
                    var b = minSize4Pin - a * min;
                    b = maxSize4Pin - a * max;
                    return a * val[2] + b;
                  },
                  label: {
                    normal: {
                      show: false,
                      formatter: function (params) {
                        return params.data.value[2];
                      },
                      textStyle: {
                        color: "#fff",
                        fontSize: 9,
                      },
                    },
                  },
                  itemStyle: {
                    normal: {
                      color: "rgba(255,255,0,0)", //标志颜色
                    },
                  },
                  zlevel: 6,
                  data: convertData(data),
                },
                {
                  name: "Top 5",
                  type: "effectScatter",
                  coordinateSystem: "geo",
                  data: convertData(
                    data
                      .sort(function (a, b) {
                        return b.value - a.value;
                      })
                      .slice(0, 5)
                  ),
                  symbolSize: function (val) {
                    return val[2] / 10;
                  },
                  showEffectOn: "render",
                  rippleEffect: {
                    brushType: "stroke",
                  },
                  hoverAnimation: true,
                  label: {
                    normal: {
                      formatter: "{b}",
                      position: "right",
                      show: false,
                    },
                  },
                  itemStyle: {
                    normal: {
                      color: "rgba(255,255,0,0.8)",
                      shadowBlur: 10,
                      shadowColor: "#05C3F9",
                    },
                  },
                  zlevel: 1,
                },
              ],
            };

            // 使用刚指定的配置项和数据显示图表。
            console.log('option', option)
            myChart.setOption(option, true);
            window.addEventListener("resize", function () {
              myChart.resize();
            });


          });


        })

      });
    },
//     echarts_33() {
//       // 基于准备好的dom，初始化echarts实例
//       this.$nextTick(async () => {
//         let myChart = this.$echarts.init(this.$refs.echart33);

//         var className = [];
//         var classList = [];

// await this.plugins.user.getinterviewdata().then((res) => {
//               console.log(res);
//         });
//         await this.plugins.user.getClass3List().then((res) => {

//           res.data[0].nColor = "#cdba00";
//           res.data[1].nColor = "#277ace";
//           res.data[2].nColor = "#ffc0cb";

//           classList = res.data;
//           res.data.forEach((item, i) => {
//             className.push(item.name);
//           });
//         });
//         // 处理数据
//         var listC = [];
//         classList.forEach((item) => {
//           item.nianList.forEach((n) => {
//             item.nianList.push(...Object.values(n));
//           });

//           item.nianList = item.nianList.slice(12, 24);

//           listC.push({
//              name: item.name,
//              type:"bar",
//              data:item.nianList
//           });
//         });
//         var zoufangzong =[]
//         listC.forEach(item=>{
//             item.data.forEach(i=>{
//               zoufangzong.push(i)
//             })

//         })
//         var maxzou =Math.max(...zoufangzong);
//         var colors = ['#cdba00', '#277ace', '#ffc0cb'];
//         var option ={
//                 color: colors,

//                 tooltip: {
//                     trigger: 'axis',
//                     axisPointer: {
//                         type: 'cross'
//                     }
//                 },
//                 grid: {
//                     right: '7%',
//                     left:'8%',
//                     bottom:'18%',
// // containLabel: true
//                 },

//                 legend: {
//                     data:className,
//                     textStyle: {
//                         color:"#fff",
//                         // fontSize:22
//                     },
//                     // orient: 'left',
//                     x: 'right',
//                     textStyle: {
//                       fontSize: '18',
//                       color: '#fff'
//                     },
//                 },
//                 xAxis: [
//                     {
//                         type: 'category',
//                         axisTick: {
//                             alignWithLabel: true
//                         },
//                         data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
//                         axisLabel: {
//                             formatter: '{value}',
//                             color:"#fff",
//                             fontSize:22
//                         }
//                     }
//                 ],
//                 yAxis: [
//                     {
//                         type: 'value',
//                         // name: '走访数量',

//                         min: 0,
//                         max: maxzou+maxzou/4,
//                         position: 'left',
//                         axisLine: {
//                             lineStyle: {
//                                 color:"#fff",
//                                 fontsize:30,
//                             }
//                         },
//                         axisLabel: {
//                             formatter: '{value}',
//                             color:"#fff",
//                             fontSize:16,
//                         },
//                         splitLine: {
//                           show: true,
//                           lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
//                             color: 'rgba(255, 255, 255, 0)',

//                           }
//                         },

//                     },

//                 ],
//                 series: listC
//             };

//         // 使用刚指定的配置项和数据显示图表。
//         myChart.setOption(option,true);
//         window.addEventListener("resize", function () {
//           myChart.resize();
//         });
//       });
//     },
    echarts_33() {
      // 基于准备好的dom，初始化echarts实例
      this.$nextTick(() => {
        let myChart = this.$echarts.getInstanceByDom(document.querySelector("#echart33")) || this.$echarts.init(document.querySelector("#echart33"));

        var className = [];
        var classList = [];
        var jiduname = [];
        var jidudata = [];

        this.plugins.user.getinterviewdata().then((res) => {

          res.nColor = "#cdba00";

          // console.log(res.data,'cg');
          className.push(res.jd)
          res.data.forEach((v, i) => {
            Object.keys(v).forEach(v => {
              jiduname.push(v)
              jidudata.push(res.data[i][v])
            })
          })


          // 处理数据
          var listC = [];
          listC = [];


          listC.push({
            name: className,
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 2,
              },
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(24, 163, 64, 1)",
                    },
                    {
                      offset: 0.8,
                      color: "rgba(24, 163, 64, 0.3)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0)",
                shadowBlur: 10,
              },
            },
            itemStyle: {
              normal: {
                // color: 'red',  nColor
                color: "#cdba00",
                borderColor: "rgba(137,189,2)",
                borderWidth: 12,
              },
            },
            data: jidudata,
            // data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
          });


          var option = {
            tooltip: {
              trigger: "axis",
              axisPointer: {
                lineStyle: {
                  color: "#57617B",
                },
              },
            },
            legend: {
              //icon: 'vertical',
              // data: ['重点工业企业', '重大工业项目', '重点招商项目', '重点工业园区', '其他', '重点服务企业', '规上企业'],
              data: className,
              //align: 'center',
              right: '8%',
              top: "0",
              textStyle: {
                color: "#fff",
                fontSize: 18,

              },
              // itemWidth: 15,
              // itemHeight: 15,
              itemGap: 20,
            },
            grid: {
              left: "20",
              right: "20",
              top: "0",
              bottom: "-10",
              containLabel: true,
            },
            xAxis: [
              {
                type: "category",
                boundaryGap: false,
                axisLabel: {
                  show: true,
                  textStyle: {
                    color: "#fff",
                    fontSize: 18,
                  },
                  rotate: "45",

                },


                axisLine: {
                  lineStyle: {
                    color: "rgba(255,255,255,.1)",
                  },
                },
                data: jiduname
              },
              {},
            ],
            yAxis: [
              {
                splitNumber: 4,

                axisLabel: {
                  show: true,
                  textStyle: {
                    color: "#fff",
                    fontSize: 20
                  },
                },
                axisLine: {
                  lineStyle: {
                    color: "rgba(255,255,255,.1)",
                  },
                },
                splitLine: {
                  lineStyle: {
                    color: "rgba(255,255,255,.1)",
                  },
                },
              },
            ],
            series: [
              //classList

              ...listC,
            ]
          };

          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
          window.addEventListener("resize", function () {
            myChart.resize();
          });


        });


      });
    },
    echarts_33_new() {
      this.monthDataAll.loading = true
      // 基于准备好的dom，初始化echarts实例
      this.$nextTick(() => {
        let has = this.$echarts.getInstanceByDom(document.querySelector("#echart33"))
        let myChart = this.$echarts.getInstanceByDom(document.querySelector("#echart33")) || this.$echarts.init(document.querySelector("#echart33"));

        var className = [];
        var classList = [];
        var jiduname = [];
        var jidudata = [];

        // 处理数据，塞入echart
        const setChart=(jiduname,jidudata)=>{
          // 处理数据
          var listC = [];
          listC = [];


          listC.push({
            name: '事项总数',
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 2,
              },
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(24, 163, 64, 1)",
                    },
                    {
                      offset: 0.8,
                      color: "rgba(24, 163, 64, 0.3)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0)",
                shadowBlur: 10,
              },
            },
            itemStyle: {
              normal: {
                // color: 'red',  nColor
                color: "#cdba00",
                borderColor: "rgba(137,189,2)",
                borderWidth: 12,
              },
            },
            data: jidudata,
            // data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
          });


          var option = {
            tooltip: {
              trigger: "axis",
              axisPointer: {
                lineStyle: {
                  color: "#57617B",
                },
              },
            },
            legend: {
              //icon: 'vertical',
              // data: ['重点工业企业', '重大工业项目', '重点招商项目', '重点工业园区', '其他', '重点服务企业', '规上企业'],
              data: 'className',
              //align: 'center',
              right: '8%',
              top: "0",
              textStyle: {
                color: "#fff",
                fontSize: 18,

              },
              // itemWidth: 15,
              // itemHeight: 15,
              itemGap: 20,
              show: false
            },
            grid: {
              left: "30",
              right: "30",
              top: "0",
              bottom: "-10",
              containLabel: true,
            },
            xAxis: [
              {
                type: "category",
                boundaryGap: false,
                axisLabel: {
                  show: true,
                  textStyle: {
                    color: "#fff",
                    fontSize: 18,
                  },
                  rotate: "45",

                },


                axisLine: {
                  lineStyle: {
                    color: "rgba(255,255,255,.1)",
                  },
                },
                data: jiduname
              },
              {},
            ],
            yAxis: [
              {
                splitNumber: 4,

                axisLabel: {
                  show: true,
                  textStyle: {
                    color: "#fff",
                    fontSize: 20
                  },
                },
                axisLine: {
                  lineStyle: {
                    color: "rgba(255,255,255,.1)",
                  },
                },
                splitLine: {
                  lineStyle: {
                    color: "rgba(255,255,255,.1)",
                  },
                },
              },
            ],
            series: [
              //classList

              ...listC,
            ],
            dataZoom: [
              {
                show: true,
                realtime: true,
                height: 8, //这里可以设置dataZoom的尺寸
                bottom: 4,	//滚动体距离底部的距离
                ...this.monthDataZoomOption
              },
              {
                type: "slider",
                realtime: true,
                ...this.monthDataZoomOption
              },
            ]
          };

          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
          window.addEventListener("resize", function () {
            myChart.resize();
          });

          setTimeout(() => {
            this.monthDataAll.loading = false
          }, 1000)
        }

        if(this.monthDataAll.years.length == 0){
          this.monthDataAll.years = [new Date().getFullYear()-1,new Date().getFullYear()]
        }
        const years = this.monthDataAll.years.filter(x => this.monthDataAll.names.filter(name => name.includes(x)).length == 0)
        if (years?.length > 0) {
          // 加载年份
          Promise.all(years.map(year => this.plugins.user.workOrderMonthStatistics(year))).then(resArr => {
            // 当前月份的最大月份名称
            const maxName = new Date().getFullYear()+"-"+(new Date().getMonth()+1+"").padStart(2, '0')
            this.monthDataAll.years.map(year => {
              this.monthDataAll.names = [...this.monthDataAll.names, ...new Array(12).fill(0).map((item, index) => "" + year + '-' + (index + 1 + '').padStart(2, '0'))]
            })
            this.monthDataAll.names = Array.from(new Set(this.monthDataAll.names)).filter(x=>x<=maxName)
            jiduname = JSON.parse(JSON.stringify(this.monthDataAll.names)).sort()


            let datas = []
            resArr.forEach(res => {
              datas = datas.concat(res.data)
            })
            this.monthDataAll.datas = datas.concat(this.monthDataAll.datas)
            jidudata = jiduname.map(x => {
              return {
                name: x,
                value: this.monthDataAll.datas.find(x2 => x2.dateStr == x)?.count || 0
              }
            })
            // 如果是初始化，加载了两年的数据，那么只取最近的12个月的数据展示，其他数据等拖动到最左边在加入
            if(this.monthDataAll.years.length == 2){

              jiduname = jiduname.filter(x => x <= maxName).sort().reverse().slice(0,12).sort()
              jidudata = jiduname.map(x => {
                return {
                  name: x,
                  value: this.monthDataAll.datas.find(x2 => x2.dateStr == x)?.count || 0
                }
              })

              const preDataName = JSON.parse(JSON.stringify(this.monthDataAll.names))
                .filter(x => x <= maxName)
                .sort().reverse().slice(12).sort()
              this.monthDataAll.initPreDatas = preDataName.map(x => {
                return {
                  name: x,
                  value: this.monthDataAll.datas.find(x2 => x2.dateStr == x)?.count || 0
                }
              })
            }

            setChart(jiduname,jidudata)

          })
        }

        // 存在了就不多绑定一次
        has || myChart.on('dataZoom', this.debounce((event) => {
          console.log('dataZoom', event); // event 包含了 dataZoom 的详细信息，如 start 和 end 值等。
          this.monthDataZoomOption = {
            start: event.start,
            end: event.end
          }
          if (!this.monthDataAll.loading && (
            event.start == 0
            || event.end == 100
          )) {
            if (event.start == 0) {
              if(this.monthDataAll.initPreDatas.length>0){
                this.monthDataAll.initPreDatas = []
                jiduname = JSON.parse(JSON.stringify(this.monthDataAll.names)).sort()
                jidudata = jiduname.map(x => {
                  return {
                    name: x,
                    value: this.monthDataAll.datas.find(x2 => x2.dateStr == x)?.count || 0
                  }
                })
                setChart(jiduname,jidudata)
                return
              }

              if (confirm("是否加载更多")) {
                this.monthDataAll.years.push(this.monthDataAll.years.sort()[0] - 1)
                this.echarts_33_new()
              }
            }
            if (event.end == 100) {
              // if (confirm("是否加载更多")) {
              //   this.monthDataAll.years.push(this.monthDataAll.years.sort().reverse()[0] + 1)
              //   this.echarts_33_new()
              // }
            }
          }
        }, 500))


      });
    },
    zb0(value0) {
      // 基于准备好的dom，初始化echarts实例

      this.$nextTick(() => {
        let myChart = this.$echarts.getInstanceByDom(document.querySelector("#zb0")) || this.$echarts.init(document.querySelector("#zb0"));
        // var v1 = 298//男消费
        var v2 = value0; //女消费
        // var v3 = v1 + v2//总消费
        var option = {
          series: [
            {
              type: "pie",
              radius: ["95%", "80%"],
              color: "#49bcf7",
              label: {
                normal: {
                  position: "center",
                },
              },
              data: [
                {
                  value: v2,
                  name: "女消费",
                  label: {
                    normal: {
                      formatter: v2 + "",
                      textStyle: {
                        fontSize: 30,
                        color: "#fff",
                      },
                    },
                  },
                },
              ],
            },
          ],
        };
        myChart.setOption(option, true);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
    zb1(nian) {
      // 基于准备好的dom，初始化echarts实例

      this.$nextTick(() => {
        let myChart = this.$echarts.getInstanceByDom(document.querySelector("#zb1")) || this.$echarts.init(document.querySelector("#zb1"));
        // var v1 = 298//男消费
        var v2 = nian; //女消费
        // var v3 = v1 + v2//总消费
        var option = {
          series: [
            {
              type: "pie",
              radius: ["95%", "80%"],
              color: "#49bcf7",
              label: {
                normal: {
                  position: "center",
                },
              },
              data: [
                {
                  value: v2,
                  name: "女消费",
                  label: {
                    normal: {
                      formatter: v2 + "",
                      textStyle: {
                        fontSize: 30,
                        color: "#fff",
                      },
                    },
                  },
                },
              ],
            },
          ],
        };
        myChart.setOption(option, true);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
    zb2(yue) {
      this.$nextTick(() => {
        let myChart = this.$echarts.getInstanceByDom(document.querySelector("#zb2")) || this.$echarts.init(document.querySelector("#zb2"));
        var v1 = yue; //男消费
        // var v2 = 523//女消费
        // var v3 = v1 + v2//总消费
        var option = {
          //animation: false,
          series: [
            {
              type: "pie",
              radius: ["95%", "80%"],
              color: "#cdba00",
              label: {
                normal: {
                  position: "center",
                },
              },
              data: [
                {
                  value: v1,
                  name: "男消费",
                  label: {
                    normal: {
                      formatter: v1 + "",
                      textStyle: {
                        fontSize: 30,
                        color: "#fff",
                      },
                    },
                  },
                },
              ],
            },
          ],
        };
        myChart.setOption(option, true);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
    zb3(zhou) {
      this.$nextTick(() => {
        let myChart = this.$echarts.getInstanceByDom(document.querySelector("#zb3")) || this.$echarts.init(document.querySelector("#zb3"));
        var v2 = zhou;
        // var v2 = Math.random()
        // var v3 = v1 + v2//总消费
        var option = {
          series: [
            {
              type: "pie",
              radius: ["95%", "80%"],
              color: "#62c98d",
              label: {
                normal: {
                  position: "center",
                },
              },
              data: [
                {
                  value: v2,
                  name: "女消费",
                  label: {
                    normal: {
                      formatter: v2 + "",
                      textStyle: {
                        fontSize: 30,
                        color: "#fff",
                      },
                    },
                  },
                },
              ],
            },
          ],
        };
        myChart.setOption(option, true);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
    /**
     * 统计事项总数 nList map()中加载了数据过来，直接拿来用
     */
    initWorkOrderCount() {
      let arraySum = (arr,key) =>{
        let sum = 0;
        arr.forEach(element => {
          sum += element[key];
        });
        return sum;
      }
      let startTime = undefined
      let endTime = new Date().formatDate("yyyy-MM-dd hh:mm:ss")
      if (this.dataYear) {
        startTime = this.dataYear + '-01-01 00:00:00'
        endTime = this.dataYear + '-12-31 23:59:59'
      }
      this.plugins.user.getRateScrollList({
        startTime: startTime,
        endTime: endTime
      }).then((res) => {
        const list = res.data
        let countAll = 0
        let countOver = 0
        let countAllComplete = 0
        let countReply = 0
        let countSubmit = 0

        countAll = arraySum(list,'countAll')
        countOver = arraySum(list,'countStatus_5')
        countAllComplete = arraySum(list,'complete')
        countReply = arraySum(list,'countReply')
        countSubmit = arraySum(list,'countSubmit')


        console.log('事项答复总数：' + countReply)
        this.zb1(countOver)
        this.zb2(countAllComplete)
        this.zb0(countAll - countSubmit)
        this.nList = (countAll + "").split('')
      })

    },
    initWorkTagCount(){
      // 事项分类统计
      this.plugins.user.getStatsOrderTagnum({
        startTime:this.dataYear?new Date(this.dataYear,0,1).getTime():null,
        endTime: this.dataYear?new Date(this.dataYear+'-12-31 23:59:59').getTime():null
      }).then(res => {
        this.rateScrollList = res.data || []
        this.rateScrollList.sort((a, b) => {
          return b.allCount - a.allCount;
        });
        // 占比
        let countAll = 0
        this.rateScrollList.forEach((item) => {
          countAll += item.allCount
        });
        this.rateScrollList = this.rateScrollList.map(x => {
          return {
            ...x,
            rate: Math.round(x.allCount / countAll * 10000) / 100
          }
        }).filter(x => !x.parentId)
        console.log('this.rateScrollList',this.rateScrollList)
      })
    },

    selectYear(event) {
      console.log(event)
      this.yearSelectorShow = false
      let year = null
      if (event.target.innerText != '全部') {
        year = event.target.innerText
      }
      // 去加载数据
      this.dataYear = year
      this.initWorkOrderCount()
      this.initWorkTagCount()
      this.map()
      this.echarts_55()
    },
    debounce(func, wait) {
      let timeout;
      return function () {
        const context = this;
        const args = arguments;
        clearTimeout(timeout);
        console.log('debounce', timeout)
        timeout = setTimeout(() => {
          func.apply(context, args);
        }, wait);
        console.log('debounce', timeout)
      }
    },
    handleClickWorkOrder(item){
      console.log('点击事项',item)
      this.workOrderDialog = true
      this.orderShowId = item.orderId
    },
    destroy() {
      return true;
    },
    handleOpenOrder(e){
      this.workOrderDialog = true
      this.orderShowId = e
    },
    handleClickRankItem(item){
      console.log('handleClickRankItem',item)
      this.tagIdShow = item.tagId

      this.rankDialog = true;
      this.dialogVisiable = false;
      this.zoufangDialog = false
    },
    handleCanderSelect(data){
      console.log('日历选择',data)
      this.timeRangOrderParam.startTime = new Date(data.value+" 00:00:00")
      this.timeRangOrderParam.endTime = new Date(data.value+" 23:59:59")
      this.timeRangOrderDialog = true
    }
  },
  created() {
    this.echarts_55();
    this.map();
    this.echarts_33_new();
    // this.echarts_5();
    // this.zb1();
    // this.zb2();
    // this.zb3(this.nList);

    this.plugins.user.getscreenData().then((res) => {

      // this.a =String(res.data.zong).padStart(6,0) ;   补0
      this.a = String(res.data.zong);

      // this.nList = this.a.split("");
      this.zhou = res.data.zhou; //yue
      this.yue = res.data.yue;
      this.nian = res.data.nian;
      // this.zb3(this.zhou);
      // this.zb2(this.yue);
      // this.zb1(this.nian);
      // 刷新
    });

    setInterval(() => {

      setTimeout(() => {
          this.$nextTick(() => {
            this.plugins.user.getscreenData().then((res) => {

              this.a = String(res.data.zong);
              // this.a =String(res.data.zong).padStart(6,0) ;

              // this.nList = this.a.split("");
              this.zhou = res.data.zhou; //yue
              this.yue = res.data.yue;
              this.nian = res.data.nian;
              // this.zb3(this.zhou);
              // this.zb2(this.yue);
              // this.zb1(this.nian);
              // 刷新
            });
            this.echarts_55();
            this.map();
            // this.echarts_33_new();
            this.echarts_5();

            // 统计事项总数
            try {
              this.initWorkOrderCount()
            } catch (e) {
            }
          })

        }
        , 0);

    }, 60000);

    let workOrderStatus = {
      1: '待提交',
      2: '已提交',
      3: '已退回',
      4: '处理中',
      5: '已办结'
    }
    this.plugins.user.getSubmitScrollData().then((res) => {
      this.submitScrollList = res.data?.filter(x => x.status == 2);
      this.dealScrollList = res.data?.filter(x => x.status == 4);
      this.dealScrollList?.forEach(x => {
        x.status = workOrderStatus[x.status] || '已办结'
      })
      if (res.data.length > 0) {
        this.submitScrollList.forEach((item) => {
          switch (item.status) {
            case 1:
              item.status = "待提交";
              break;
            case 2:
              item.status = "已提交";
              break;
            case 3:
              item.status = "已退回";
              break;
            case 4:
              item.status = "处理中";
              break;
            default:
              item.status = "已办结";
              break;
          }
        });
      }
    });

    this.plugins.user.getEndScrollList().then((res) => {
      this.endScrollList = res.data;
      if (res.data.length > 0) {
        this.endScrollList.forEach((item) => {
          switch (item.status) {
            case 1:
              item.status = "待提交";
              break;
            case 2:
              item.status = "已提交";
              break;
            case 3:
              item.status = "已退回";
              break;
            case 4:
              item.status = "处理中";
              break;
            default:
              item.status = "已办结";
              break;
          }
        });
      }
    });
    // getRateScrollList
    this.plugins.user.getTimeoutScrollList().then((res) => {
      this.timeoutScrollList = res.data;
      this.timeoutScrollList.forEach((item) => {
        switch (item.status) {
          case 1:
            item.status = "待提交";
            break;
          case 2:
            item.status = "已提交";
            break;
          case 3:
            item.status = "已退回";
            break;
          case 4:
            item.status = "处理中";
            break;
          default:
            item.status = "已办结";
            break;
        }
      });
    });

    // this.plugins.user.getRateScrollList().then((res) => {
    // // console.log(res);
    // this.rateScrollList = [];
    // res.data.map((item) => {
    //   this.rateScrollList.push(
    //     Object.assign(item, {
    //       bRate: (item.countStatus_5 / item.countAll) * 100,
    //     })
    //   );
    // });

    // 调研服务小组 2025-02-07 注释
    // this.plugins.user.getstatisticsOrderFwxznum().then((res) => {
    //   this.rateScrollList = [];
    //   res.data.map((item) => {
    //     this.rateScrollList.push(
    //       Object.assign(item, {
    //         bRate: (item.countStatus5 / item.allCount) * 100,
    //       })
    //     );
    //   });
    //
    //   this.rateScrollList.forEach((item) => {
    //     if (isNaN(item.bRate)) {
    //       item.bRate = 0;
    //     }
    //   });
    //
    //   this.rateScrollList.sort(function (a, b) {
    //     return b.bRate - a.bRate;
    //   });
    // });

    this.initWorkTagCount()

    // 统计事项总数
    try {
      this.initWorkOrderCount()
    } catch (e) {
    }
  },
};
</script>

<style scoped lang='scss'>
@import "../common/common.css";
/* @import '../common/map.css'; */
.qq {
  color: rgb(86, 229, 86) !important;
}

.ww {
  color: yellow !important;
}

.ee {
  color: #f52929 !important;
}

.zoufangDialog {
  width: 73vw;
  height: 85vh;
  z-index: 9999;
  background: url("../assets/map_bg.png") center;
  background-size: contain;
  // height: 100px;
  border: 1px solid #0947d8;
  box-shadow: 1px 1px 2px 0px rgba(192, 196, 204, 1),
  -1px -1px 2px 0px rgb(31, 89, 206);
}

.cswbjDialog {
  position: absolute;

  width: 73vw;
  height: 85vh;
  z-index: 9999;
  background: url("../assets/map_bg.png") center;
  background-size: contain;
  // height: 100px;
  border: 1px solid #0947d8;

  box-shadow: 1px 1px 2px 0px rgba(192, 196, 204, 1),
  -1px -1px 2px 0px rgb(31, 89, 206);
}

.zxDealwtDialog {
  position: absolute;
  width: 73vw;
  height: 85vh;
  z-index: 9999;
  background: url("../assets/map_bg.png") center;
  background-size: contain;
  // height: 100px;
  border: 1px solid #0947d8;
  box-shadow: 1px 1px 2px 0px rgba(192, 196, 204, 1),
  -1px -1px 2px 0px rgb(31, 89, 206);
}

.zxbjwtDialog {
  position: absolute;
  width: 73vw;
  height: 85vh;
  z-index: 9999;
  background: url("../assets/map_bg.png") center;
  background-size: contain;
  // height: 100px;
  border: 1px solid #0947d8;
  box-shadow: 1px 1px 2px 0px rgba(192, 196, 204, 1),
  -1px -1px 2px 0px rgb(31, 89, 206);
}

.zxtjwtDialog {
  position: absolute;
  width: 73vw;
  height: 85vh;
  z-index: 9999;
  background: url("../assets/map_bg.png") center;
  background-size: contain;
  // height: 100px;
  border: 1px solid #0947d8;
  box-shadow: 1px 1px 2px 0px rgba(192, 196, 204, 1),
  -1px -1px 2px 0px rgb(31, 89, 206);
}


.workOrderDialog {
  position: absolute;
  width: 73vw;
  height: 85vh;
  z-index: 9999;
  background: url("../assets/map_bg.png") center;
  background-size: contain;
  // height: 100px;
  border: 1px solid #0947d8;
  box-shadow: 1px 1px 2px 0px rgba(192, 196, 204, 1),
  -1px -1px 2px 0px rgb(31, 89, 206);
}

.rankDialog {
  width: 73vw;
  height: 85vh;
  z-index: 9999;
  background: url("../assets/map_bg.png") center;
  background-size: contain;
  // height: 100px;
  border: 1px solid #0947d8;
  box-shadow: 1px 1px 2px 0px rgba(192, 196, 204, 1),
  -1px -1px 2px 0px rgb(31, 89, 206);
}

.tihead {
  display: flex;
  align-items: center;

  .title {
    // display: flex;
    font-size: 22px;
  }

  .tiright {
    margin-right: 8px;
    color: #fff;
    font-size: 22px;
    text-align: right;
    width: 160px;
    cursor: pointer;

    &:hover {
      color: #0089ff;
    }
  }
}

.dialog {
  // background: #fff;
  position: absolute;
  width: 73vw;
  height: 85vh;
  min-width: 60vw;
  background: url("../assets/map_bg.png") center;
  background-size: contain;
  // height: 100px;
  z-index: 99999;
  border: 1px solid #0947d8;
  box-shadow: 1px 1px 2px 0px rgba(192, 196, 204, 1),
  -1px -1px 2px 0px rgb(31, 89, 206);

  &::before {
    position: absolute;
    display: inline-block;
    content: "";
    width: 20px;
    height: 20px;
    transform: rotate(45deg);
    border-left: 2px solid #0947d8;
    border-bottom: 2px solid #0947d8;

    background: linear-gradient(
                    45deg,
                    #182658,
                    #182658 50%,
                    transparent 50%,
                    transparent 100%
    );

    top: 40px;
    left: -12px;
  }

  .fix-top {
    width: 100%;
    height: 15vh;
  }

  .fix-content {
    display: flex;

    .fix-left {
      width: 57%;
      height: 70vh;
    }

    .fix-right {
      width: 43%;
      height: 70vh;
    }
  }
}

.page-squareness {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100vw !important;
  height: 100vh;
  background: white;

  .a {
    width: 100vw;
    height: 100%;
  }
}

html,
body {
  height: 100%;
  width: 100%;
}

.data {
  width: 100%;
  height: 100%;
  background: url("../assets/map_bg3.png");
  background-size: 100% 100%;
  min-width: 1366px;
}

.data > .data-title {
  width: 100%;
  height: 105px;
  padding: 30px 0 35px 0;
  box-sizing: border-box;
}

.data > .data-title > .title-center {
  width: 780px;
  height: 40px;
  box-sizing: border-box;
  border-right: 5px solid #0089ff;
  border-left: 5px solid #0089ff;
  color: #fff;
  text-align: center;
  font-size: 60px;
  line-height: 40px;

  /* background: url("../assets/title.png") no-repeat; */
}

.data > .data-title > .title-left,
.data > .data-title > .title-right {
  width: calc(50% - 390px);
  height: 3px;
  background: #0089ff;
  margin-top: 18px;
}

.data > .data-content {
  width: 100%;
  height: calc(100% - 105px);
  padding: 0 20px 20px 20px;
  box-sizing: border-box;
}

.data > .data-content > .con-left {
  width: 23.4375%;
  height: 100%;
}

.data > .data-content > .con-left > .left-top {
  width: 100%;
  height: calc(100% - 20px);
  margin-bottom: 20px;
  position: relative;
}

.data > .data-content > .con-left > .left-top > .info {
  height: 40%;
  width: 100%;
  border: 1px solid #20558b;
  /*border-radius: 4px;*/
  box-sizing: border-box;
  position: relative;
}

.data > .data-content > .con-left > .left-top > .info > .info-title {
  width: 230px;
  height: 63px;
  background: url("../assets/info-title.png") no-repeat;
  background-size: cover;
  position: absolute;
  top: -31px;
  left: 42%;
  margin-left: -74px;
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  line-height: 59px;
  text-align: center;
}

.data > .data-content > .con-left > .left-top > .info > .info-main {
  width: 100%;
  height: 80%;
}

.data > .data-content > .con-left > .left-top > .info > .info-main > div {
  width: 275px;
  height: 25%;
  background: url("../assets/info-text.png") no-repeat;
  margin: 8px auto;
}

.data
> .data-content
> .con-left
> .left-top
> .info
> .info-main
> div.info-1 {
  margin-top: 40px;
}

.data > .data-content > .con-left > .left-top > .info > .info-main .info-img {
  width: 100px;
  height: 60px;
  position: relative;
}

.data
> .data-content
> .con-left
> .left-top
> .info
> .info-main
.info-img
> img {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -24px;
  margin-top: -24px;
}

.data > .data-content > .con-left > .left-top > .info > .info-main .info-text {
  width: 175px;
  height: 70px;
  padding-left: 30px;
  padding-top: 16px;
  box-sizing: border-box;
}

.data
> .data-content
> .con-left
> .left-top
> .info
> .info-main
.info-text
> p:nth-child(1) {
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}

.data
> .data-content
> .con-left
> .left-top
> .info
> .info-main
> .info-1
> .info-text
> p:nth-child(2) {
  font-weight: 600;
  color: #ffff44;
  font-size: 22px;
}

.data
> .data-content
> .con-left
> .left-top
> .info
> .info-main
> .info-2
> .info-text
> p:nth-child(2) {
  font-weight: 600;
  color: #25f3e6;
  font-size: 22px;
}

.data
> .data-content
> .con-left
> .left-top
> .info
> .info-main
> .info-3
> .info-text
> p:nth-child(2) {
  font-weight: 600;
  color: #f84a4a;
  font-size: 22px;
}

.data
> .data-content
> .con-left
> .left-top
> .info
> .info-main
> .info-4
> .info-text
> p:nth-child(2) {
  font-weight: 600;
  color: #f5c847;
  font-size: 22px;
}

.data > .data-content > .con-left > .left-top > .top-bottom {
  height: calc(60% - 0px);
  width: 100%;
  background-color: rgba(0, 24, 106, 0.5);
  margin-top: 20px;
  border: 1px solid #20558b;
  box-sizing: border-box;
  position: relative;
}

.data > .data-content > .con-left > .left-bottom {
  width: 100%;
  height: 25%;
  background-color: rgba(0, 24, 106, 0.5);
  border: 1px solid #20558b;
  box-sizing: border-box;
  position: relative;
}

.data > .data-content > .con-center {
  width: 53.125%;
  height: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  position: relative;
}

.data > .data-content > .con-center > .map-num {
  width: 48vw;
  height: 120px;
  position: absolute;
  top: 15px;
  display: flex;
  justify-content: flex-start;
  left: 50px;
  z-index: 1000;
}

.data > .data-content > .con-center > .map-num > .num {
  width: 100px;
  height: 100%;
}

.cander {
  margin-left: auto;
  margin-top: -.5xvw;
  width: 14vw;
  min-width: 100px;
  height: 25vh;
}

.data > .data-content > .con-center > .map-num p {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}

.data > .data-content > .con-center > .map-num .span {
  display: inline-block;
  margin-top: 10px;
  width: 45px;
  height: 90px;
  text-align: center;
  line-height: 90px;
  background-color: #0089ff;
  color: #fff;
  font-size: 78px;
  font-weight: 600;
  font-family: "LcdD";
  margin-top: 15px;
  margin-right: 10px;
}

// .data>.data-content>.con-center>.map-num span:nth-child(2),
// .data>.data-content>.con-center>.map-num span:nth-child(6){
//     background-color: transparent;
//     width: 30px;
// }

.data > .data-content > .con-center > .cen-top {
  width: 100%;
  height: calc(75% - 20px);
  margin-bottom: 20px;
  /*background-color: rgba(0,24,106,0.3);*/
  /*border: 1px solid #0089ff;*/
  /*border-radius: 4px;*/
  /*box-sizing: border-box;*/
}

.data > .data-content > .con-center > .cen-bottom {
  width: 100%;
  height: 25%;
  background-color: rgba(0, 24, 106, 0.5);
  border: 1px solid #20558b;
  box-sizing: border-box;
  position: relative;
}


.data > .data-content > .con-right {
  width: 23.4375%;
  height: 100%;
  position: relative;
}

.data > .data-content > .con-right > .right-top {
  width: 100%;
  height: 32%;
  background-color: rgba(0, 24, 106, 0.5);
  border: 1px solid #20558b;
  box-sizing: border-box;
  // position: relative;
}

.data > .data-content > .con-right > .right-top > .title {
  display: flex;
  justify-content: space-between;
}

.data > .data-content > .con-right > .right-center > .title {
  display: flex;
  justify-content: space-between;
}

.data > .data-content > .con-right > .right-bottom > .title {
  display: flex;
  justify-content: space-between;
}

.data > .data-content > .con-right > .right-top > .title > .tilx {
  margin-right: 12px;
  font-size: 22px;
}

.data > .data-content > .con-right > .right-center > .title > .tilx {
  font-size: 22px;
  margin-right: 12px;
}

.data > .data-content > .con-right > .right-bottom > .title > .tilx {
  font-size: 22px;
  margin-right: 12px;
}

.data > .data-content > .con-right > .right-top > .title > .tilx:hover {
  color: #0089ff;
  cursor: pointer;
}

.data > .data-content > .con-right > .right-center > .title > .tilx:hover {
  color: #0089ff;
  cursor: pointer;
}

.data > .data-content > .con-right > .right-bottom > .title > .tilx:hover {
  color: #0089ff;
  cursor: pointer;
}

.data > .data-content > .con-right > .right-center {
  width: 100%;
  height: calc(36% - 40px);
  margin: 20px 0;
  background-color: rgba(0, 24, 106, 0.5);
  border: 1px solid #20558b;
  box-sizing: border-box;
  position: relative;
}

.data > .data-content > .con-right > .right-bottom {
  width: 100%;
  height: 32%;
  background-color: rgba(0, 24, 106, 0.5);
  border: 1px solid #20558b;
  box-sizing: border-box;
  position: relative;
}

.data > .data-content .title {
  height: 35px;
  line-height: 35px;
  width: 100%;
  color: #fff;
  font-weight: 600;
  padding-left: 15px;
  box-sizing: border-box;
}

.data > .data-content .charts {
  width: 100%;
  height: calc(100% - 35px);
  // overflow: auto;
}

.data > .data-content img.bj-1 {
  position: absolute;
  left: -1px;
  top: -1px;
}

.data > .data-content img.bj-2 {
  position: absolute;
  right: -1px;
  top: -1px;
}

.data > .data-content img.bj-3 {
  position: absolute;
  right: -1px;
  bottom: -1px;
}

.data > .data-content img.bj-4 {
  position: absolute;
  left: -1px;
  bottom: -1px;
}

.pulll_right {
  float: right;
}

.zhibiao {
  height: 150%;
  width: 35%;
}

.zb1,
.zb2,
.zb3 {
  float: left;
  width: 33.333%;
  height: 100%;
}

#zb0,
#zb1,
#zb2,
#zb3 {
  height: calc(100% - 30px);
}

.zhibiao span {
  // width: 90px;
  width: 100%;
  // padding-top: 15px;
  display: block;
  text-align: center;
  color: #fff;
  font-size: 20px;
}

/* 事项分类统计 */
/* .boxall{ padding:15px;  background: rgba(0,0,0,.2); position: relative; margin-bottom:15px;; z-index: 10;}
.alltitle{ font-size:18px; color:#fff; position: relative; padding-left: 12px;margin-bottom: 10px;}
.alltitle:before{ width: 5px; height: 20px; top:2px; position: absolute; content: ""; background: #49bcf7; border-radius:20px; left: 0; } */
.navboxall {
  margin-top: 26px;
  margin-left: 6px;
  height: calc(100% - 30px);
}

/* 半截 */
.navboxall {
  height: calc(100% - 30px);
}

/* 表格 */

.table1 {
  margin-left: 10px;
  width: 94%;
  // height:20%; overflow: hidden;
}

.table1 .seamless-warp {
  height: 20%;
  overflow: hidden;
  margin-top: 10px;
}

.table1 th {
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 16px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: normal;
  padding: 0 0 10px 0;
}

.table1 td {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.4);
  padding: 12px 0 0 0;
  margin-left: 10px;
}

.table1 span {
  width: 24px;
  height: 24px;
  border-radius: 3px;
  display: block;
  background: #878787;
  color: #fff;
  line-height: 24px;
  text-align: center;
}

.table1 tr:nth-child(2) span {
  background: #ed405d;
}

.table1 tr:nth-child(3) span {
  background: #f78c44;
}

.table1 tr:nth-child(4) span {
  background: #49bcf7;
}

/* 事项完结 */
// .wrap{ height:60%; overflow: hidden;}
// .wrap li{  line-height:40px; height:40px; }
// .wrap li p,.wraptit{ font-size: 0; }
// .wrap li span,.wraptit span{ display: inline-block; font-size: 18px;color: rgba(255,255,255,.6);}
// .wraptit { border-bottom: 1px solid rgba(255,255,255,.2); padding:0 0 10px 0; margin-bottom: 10px;}
// .wrap li span:nth-child(1),.wraptit span:nth-child(1){ width: 30%}
// .wrap li span:nth-child(2),.wraptit span:nth-child(2){ width: 20%}
// .wrap li span:nth-child(3),.wraptit span:nth-child(3){ width: 20%}
// .wrap li span:nth-child(4),.wraptit span:nth-child(4){ width: 30%}

/* 全部 */

.table1 th {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 16px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: normal;
  padding: 0 0 10px 0;
  width: 20px;
}

.table1 td {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.4);
  padding: 12px 0 0 0;
}

.table1 span {
  width: 24px;
  height: 24px;
  border-radius: 3px;
  display: block;
  background: #878787;
  color: #fff;
  line-height: 24px;
  text-align: center;
}

.table1 tr:nth-child(2) span {
  background: #ed405d;
}

.table1 tr:nth-child(3) span {
  background: #f78c44;
}

.table1 tr:nth-child(4) span {
  background: #49bcf7;
}

/*Plugin CSS*/

.wrap {
  height: calc(100% - 130px);
  overflow: hidden;
  padding: 0 15px;
  box-sizing: border-box;
}

.wrap li {
  line-height: 40px;
  height: 40px;
  list-style-type: none;
}

.wrap li p,
.wraptit {
  font-size: 30px;
}

.wrap li span,
.wraptit span {
  display: inline-block;
  font-size: 20px;
  color: white
}

.wraptit {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0 0 10px 15px;
  margin-bottom: 10px;
}

.wrap li span:nth-child(1),
.wraptit span:nth-child(1) {
  width: 20%;
  line-height: 20px;
}

.wrap li span:nth-child(2),
.wraptit span:nth-child(2) {
  width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 20px;
}

.wrap li span:nth-child(3),
.wraptit span:nth-child(3) {
  width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 20px;
}

.wrap li > .col,
.wraptit > .col {
  width: 20%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 17px;
}

.seamlessWarp {
  margin-top: 10px;
  height: calc(100% - 120px);
  overflow: hidden;

  .liStyle {
    height: 40px;
    line-height: 40px;
    width: 100%;
    display: flex; //设置flex布局，否则span标签无法设置宽度
    align-items: center;
    //设置宽度与表头列宽一致
    .title1 {
      width: 20%;
      font-size: 22px;
      // color: rgba(255, 255, 255, 0.4);
      color: white;
    }

    //.title1:nth-child(1) {
    //  margin-top: 8px;
    //  width: 15%;
    //  .fTitle {
    //    width: 34px;
    //    height: 34px;
    //    border-radius: 3px;
    //    display: block;
    //    background: #878787;
    //    color: #fff;
    //    line-height: 36px;
    //    text-align: center;
    //    margin: 0 50px 0 10px;
    //  }
    //}
    .title1:nth-child(1) {
      width: 35%;
      text-align: center;
    }

    .title1:nth-child(2) {
      width: 15%;
    }

    .title1:nth-child(3) {
      width: 17%;
    }

    .title1:nth-child(4) {
      width: 18%;
    }

    .title1:nth-child(5) {
      width: 18%;
    }

    // .text_align { text-align: center; }
  }

  .liStyleLight {
    background: rgba(116, 186, 242, .3);
  }
}

.yearSelectorContainer {
  height: 0;
  overflow: visible;
  z-index: 100;

  ul {
    width: 150px;
    text-align: center;
    background: rgba(255, 255, 255, .9);

    li {
      padding: 5px;

      &:hover {
        background: rgba(74, 96, 66, 0.8);
      }
    }
  }
}
.workOrderHandle{
  cursor: pointer;
  &:hover{
    background: rgba(73, 188, 247, 0.44) !important;
  }
}

.yearSelector{
  background: transparent;
  color:white;
  font-size: 20px;
  border:1px solid #20558b;
  width:400px;
  li{
    background: rgb(15, 34, 84);
  }
}
</style>
